<template>
    <div class="paper-tree-root">
        <el-input
          placeholder="快速搜索"
          v-model="filterText">
        </el-input>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          highlight-current
          default-expand-all
          :expand-on-click-node="click_expand"
          :filter-node-method="filterNode"
          @node-click="send"
          ref="tree">
        </el-tree>
    </div>
</template>

<script>
export default {
    name: "paperTree",
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        send(obj) {
            // console.log("树::", obj);
            let temp = obj.id === 88888 ? { label: "" } : obj;
            this.$emit("vocal", temp);
        },
        initTree() {
            let parse = JSON.parse(sessionStorage.paperGroupField);
            let resultData = parse.paper_class !== null ? parse.paper_class : {};
            this.data = [
                {
                    id: 88888,
                    label: "所有分类",
                    children: []
                }
            ];
            for (let i = resultData.length - 1; i >= 0; i--) {
                this.data[0].children[i] = {
                    id: i,
                    label: resultData[i]
                };
            }
        }
    },
    created() {
        window.addEventListener("storage", this.initTree);
        setTimeout(this.initTree, 200);
    },
    data() {
        return {
            filterText: "",
            data: [
                {
                    id: 0,
                    label: "所有分类",
                    children: []
                }
            ],
            defaultProps: {
                children: "children",
                label: "label"
            },
            click_expand: false
        };
    },
    beforeDestroy() {
        window.removeEventListener("storage", this.initTree);
    }
};
</script>

<style scoped lang="scss">
    .paper-tree-root {
        display: block;
        margin-right: 20px;
    }
</style>